<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渠道管理</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/vendors/iconly/bold.css">
    <link rel="stylesheet" href="/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="/vendors/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/antd-layout.css">
    <script src="/js/common.js"></script>
    <script src="/js/vue.2.6.4.min.js"></script>
    <script src='/js/jquery.3.6.0.min.js'></script>
    <style>
        .element-table {background: #ffffff;border: 1px solid #ebeef5;border-radius: 0;overflow: hidden;margin: 0 -1.5rem;border-left: none;border-right: none;}
        .element-table table {width: 100%;border-collapse: collapse;}
        .element-table thead th {background: #f5f7fa;color: #909399;font-weight: 500;text-align: center;padding: 12px 10px;font-size: 14px;border-bottom: 1px solid #ebeef5;border-right: 1px solid #ebeef5;}
        .element-table thead th:last-child {border-right: none;}
        .element-table tbody td {padding: 12px 10px;border-bottom: 1px solid #ebeef5;border-right: 1px solid #ebeef5;color: #606266;font-size: 14px;text-align: center;}
        .element-table tbody td:last-child {border-right: none;}
        .element-table tbody tr {transition: background-color 0.25s ease;}
        .element-table tbody tr:hover {background: #f5f7fa;}
        .element-table tbody tr:nth-child(even) {background: #fafafa;}
        .element-table tbody tr:nth-child(even):hover {background: #f5f7fa;}
        .element-table tbody tr:last-child td {border-bottom: none;}
        .el-btn-text {display: inline-block;padding: 5px 15px;font-size: 14px;border-radius: 4px;cursor: pointer;transition: all 0.3s;text-decoration: none;margin-right: 8px;border: 1px solid;}
        .el-btn-text:last-child {margin-right: 0;}
        .el-btn-text:hover {text-decoration: none;}
        .el-btn-primary {color: #409eff;border-color: #c6e2ff;background: #ecf5ff;}
        .el-btn-primary:hover {color: #66b1ff;border-color: #409eff;background: #d9ecff;}
        .action-buttons {display: flex;align-items: center;justify-content: center;}
    </style>
</head>
<body>
<div id="app">
    <div id="nav-bar-container"></div>

    <div id="main">
        <header class="mb-3">
            <a href="#" class="burger-btn d-block d-xl-none">
                <i class="bi bi-justify fs-3"></i>
            </a>
        </header>

        <div class="page-heading">
            <section class="section">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">广播管理</h5>
                                <a href="#" class="btn btn-primary" data-bs-toggle="modal"
                                   data-bs-target="#inlineForm" @click="beginAdd()">
                                    <i class="bi bi-plus-lg me-1"></i>新增
                                </a>
                            </div>
                            <div class="card-body">
                                <!-- Table with outer spacing -->
                                <div class="table-responsive element-table">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>渠道ID</th>
                                            <th>标题</th>
                                            <th>内容</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="item in resList">
                                            <td>{{item.id}}</td>
                                            <td>{{item.channelId}}</td>
                                            <td>{{item.title}}</td>
                                            <td>{{item.content}}</td>
                                            <td>{{formatDateFull(item.createTime)}}</td>
                                            <td>
                                                <div class="action-buttons">
                                                    <a href="#" class="el-btn-text el-btn-primary" data-bs-toggle="modal"
                                                       data-bs-target="#inlineForm" @click="beginEdit(item)">编辑</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel33" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
                 role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel33">编辑 </h4>
                        <button type="button" class="close" data-bs-dismiss="modal"
                                aria-label="Close">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <orm action="#">
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-3">
                                        channelId (0全部展示):
                                    </div>
                                    <div class="col-9">
                                        <input type="text" class="form-control" v-model="bindModel.channelId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        标题:
                                    </div>
                                    <div class="col-9">
                                        <div class="col-9">
                                            <input type="text" class="form-control" v-model="bindModel.title">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        内容:
                                    </div>
                                    <div class="col-9">
                                        <textarea class="form-control" rows="5"  v-model="bindModel.content"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        展示次数:
                                    </div>
                                    <div class="col-9">
                                        <input type="number" class="form-control" v-model="bindModel.showTimes">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-3">
                                        限制版本(低于此版本展示):
                                    </div>
                                    <div class="col-9">
                                        <input type="text" class="form-control" v-model="bindModel.versionLimit">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-3">
                                        动作:
                                    </div>
                                    <div class="col-9">
                                        <select class="form-control" v-model="bindModel.action">
                                            <option value="0">无动作</option>
                                            <option value="1">跳转网页</option>
                                            <option value="2">APP内跳转</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-3">
                                        附带参数:
                                    </div>
                                    <div class="col-9">
                                        <textarea class="form-control" rows="5"  v-model="bindModel.extraParams"></textarea>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-secondary"
                                    data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">关闭</span>
                            </button>
                            <button type="button" class="btn btn-primary ml-1"
                                    data-bs-dismiss="modal">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="d-none d-sm-block" @click="submitItem()">提交</span>
                            </button>
                        </div>
                    </orm>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/nav-bar.js"></script>
<script src="/js/main.js"></script>
</body>

</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        var mainVue = new Vue({
            el: `#main`,
            data: {
                userInfo: {userName: '', token: '', imageHeadUrl: ''},
                bindModel: {
                    id: 0,
                    channelId: '',
                    title: '',
                    content:'',
                    showTimes: 1,
                    versionLimit: 100,
                    action: '',
                    extraParams: ''
                },
                resList: [],
                qry: {
                    current: 1,
                    pageSize: 20,
                    examBankId: 0
                },
                examBankId: 0,
                pageNums: [1, 2, 3]
            },
            methods: {
                'init': function () {
                    var examBankId = localStorage.getItem("examBankId");
                    if (examBankId) {
                        this.qry.examBankId = examBankId;
                        this.examBankId = examBankId;
                    }
                    var thisVue = this;
                    var localUserInfo = localStorage.getItem("userInfo");
                    if (localUserInfo) {
                        thisVue.$set(thisVue, 'userInfo', JSON.parse(localUserInfo));
                    }
                    this.getResList();
                },
                'beginAdd': function () {
                    this.bindModel = {
                        id: 0,
                        channelId: '',
                        title: '',
                        content:'',
                        showTimes: 1,
                        versionLimit: 100,
                        action: '',
                        extraParams: ''
                    }
                },
                'beginEdit': function (item) {
                    this.bindModel = item;
                },

                'submitItem': function () {
                    var thisVue = this;
                    var url = '/common/addSysBroadcast';
                    if (thisVue.bindModel.id > 0) {
                        url = '/common/updateSysBroadcast';
                    }
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: url,
                        data: JSON.stringify(thisVue.bindModel),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.getResList();
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'getResList': function () {
                    var thisVue = this;
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: '/common/getSysBroadcastList',
                        data: JSON.stringify(thisVue.qry),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.resList = data.data;
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'formatDateFull': function (date) {
                    return formatDateFull(date);
                },
            }
        });
        mainVue.init();
    });
</script>
